<template>
  <div class="stock-select-table-style">
    <el-input
      class="input-style"
      @change="onChangeInput"
      v-model="value"
      placeholder="请选择"
      :suffix-icon="isShowTable ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
      @click.native="deptogglePanel($event)"
      size="mini"
      clearable
      :style="inputStyle"
    ></el-input>
    <div class="select-table">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
        class="check-title"
        >全选</el-checkbox
      >
      <el-checkbox-group
        v-model="checkedStocks"
        @change="handleCheckedCitiesChange"
        class="check-group"
      >
        <el-checkbox v-for="(item, index) in stockList" :label="item.name" :key="index">
          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
        :pager-count="pagerCount"
        small
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// import { getStockList } from "@/api/stock/whstock.js";
var data = {
  total: 5,
  rows: [
    {
      type: "2",
      vmMainPort: "",
      name: "杏坛一号仓",
    },
    {
      type: "3",
      vmMainPort: "",
      name: "青岛中外运保税仓",
    },
    {
      type: "4",
      vmMainPort: "",
      name: "美悦票据仓",
    },
    {
      type: "2",
      vmMainPort: "",
      name: "杏坛二号仓",
    },
    {
      type: "1",
      vmMainPort: "1",
      name: "广西港",
    },
  ],
  code: 200,
  msg: "查询成功",
};
const stockOptions = ["上海", "北京", "广州", "深圳"];
export default {
  props: {
    // 自定义样式
    inputStyle: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      value: "", // 输入框绑定的值
      isShowTable: false, // 判断是否显示表格
      stockList: [], // 仓库列表
      pagerCount: 5, // 当页数多余5页时显示省略号
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,

      checkAll: false, // 是否全选
      checkedStocks: ["上海", "北京"], // 已选
      stocks: stockOptions, // 选项列表
      isIndeterminate: true, // 是否全选了的标志

      tableHead: ['仓库类型', '虚拟仓主港', '仓库名称'], // 表格标题
    };
  },
  created() {
    // getStockList().then((res) => {
    //   console.log(res, "res");
    //   this.stockList = res.rows;
    //   this.totalPage = res.total;
    // });
    this.stockList = data.rows;
    this.totalPage = data.total;
  },
  watch: {},
  methods: {
    // 初始化处理数据
    init() {
      this.tableHead.forEach((item) => {
        let arr = [];
        this.tableList.forEach((listItem) => {
          arr.push(listItem[item.prop]);
        });
        this.options[item.prop] = new Set(arr);
        this.oldOptions[item.prop] = new Set(arr);
      });
      this.value = this.isCheckedList.toString();
      this.checkedList = this.isCheckedList;
    },
    // 输入框的值修改
    onChangeInput() {},
    // 阻止冒泡行为
    deptogglePanel(e) {},
    // 全选
    handleCheckAllChange(val) {
      this.checkedStocks = val ? stockOptions : [];
      this.isIndeterminate = false;
    },
    // 选中某一个
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.stocks.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.stocks.length;
    },
    /**
     * 每页数
     * @param val
     */
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    /**
     * 当前页
     * @param val
     */
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    /**
     * 多选
     * @param val
     */
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.stock-select-table-style {
  .input-style {
    max-width: 220px;
  }
  .check-title {
    display: flex;
  }
  .check-group {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: 24px;
    margin-top: 23px;
    ::v-deep .el-checkbox {
      height: 24px;
      width: 24px;
      line-height: 24px;
    }
    ::v-deep .el-checkbox__label {
      // display: none;
    }
  }
}
</style>